﻿@{
    ViewData["Title"] = "租户列表";
}
<div class="layui-layout layui-layout-admin">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="btnsearch">
                            <i class="layui-icon layui-icon-search"></i> 查询
                        </button>
                    </div>
                </div>
            </form>
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                    <table id="lsttable" lay-filter="lsttable"></table>
                    <script type="text/html" id="toolbar">
                        <button class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon layui-icon-addition"></i> 添加
                        </button>
                    </script>
                    <script type="text/html" id="bar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">
                           <i class="layui-icon layui-icon-edit"></i>
                        </a>
                        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                           <i class="layui-icon layui-icon-close"></i>
                        </a>
                    </script>
                </div>
                <div class="layui-col-md8">
                    <table id="lsttable_1" lay-filter="lsttable_1"></table>
                    <script type="text/html" id="toolbar_1">
                        <button class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon layui-icon-addition"></i> 添加
                        </button>
                        <div class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" id="typeTitle"></div>
                    </script>
                    <script type="text/html" id="bar_1">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">
                           <i class="layui-icon layui-icon-edit"></i>
                        </a>
                        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                           <i class="layui-icon layui-icon-close"></i>
                        </a>
                    </script>
                </div>
            </div>

        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        var app = { dictTypeId :0};
        layui.use(['tools', 'toast', 'http'], function () {
            var table = layui.table,
                $ = layui.$,
                form = layui.form,
                http = layui.http,
                toast = layui.toast,
                tools = layui.tools;
            //
            app.loadType =function(){
                let cols =
                    [[
                        { title: '字典名称', field: 'name', width: 160 },
                        { title: '字典编码', field: 'code' },
                        { title: '操作', toolbar: '#bar', align: 'right', width: 120 }
                    ]];
                //
                tools.PageTable({ url: '/api/sysDictType/page', cols, done: function (res, curr, count, origin) { app.loadData(); } });
                table.on('toolbar(lsttable)', function (obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    switch (obj.event) {
                        case 'add':
                            app.add(0);
                            break;
                    };
                });
                table.on('tool(lsttable)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'edit':
                            app.add(0, data);
                            break;
                        case 'del':
                            app.del(0, data.id);
                            break;
                    };
                });
                table.on('row(lsttable)', function (obj) {
                    var data = obj.data;                   
                    app.dictTypeId = data.id;                   
                    table.reload('lsttable_1', {
                        where: {
                            dictTypeId: data.id,
                            page: 1
                        }
                    })
                    setTimeout(function () { $('#typeTitle').html(data.name); }, 100);
                });
            }
            app.loadData = function () {
                let cols_1 =
                    [[
                        { title: '字典值', field: 'value' },
                        { title: '编码', field: 'code', width: 160 },
                        { title: '拓展数据', field: 'extData', width: 160 },
                        { title: '排序', field: 'orderNo', width: 100 },
                        { title: '操作', toolbar: '#bar_1', align: 'right', width: 120 }
                    ]];
                //
                tools.PageTable({ elem: '#lsttable_1', toolbar: '#toolbar_1', url: '/api/sysDictData/page', cols: cols_1 });
                table.on('toolbar(lsttable_1)', function (obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    switch (obj.event) {
                        case 'add':
                            app.add(1, { dictTypeId: app.dictTypeId });
                            break;
                    };
                });
                table.on('tool(lsttable_1)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'edit':
                            app.add(1, data);
                            break;
                        case 'del':
                            app.del(1, data.id);
                            break;
                    };
                });
            }
            //
            app.add = function (action, data) {
                let arrTitle = ['字典类型管理', '字典项管理'];
                let arrUrl = ['./TypeAdd', './DataAdd'];
                //
                tools.open({
                    area: ['700px', '100%'],
                    content: arrUrl[action],
                    title: arrTitle[action],
                    success: function (layero, index, that) {
                        tools.initValue(layero, data);
                    },
                    yes: function (index, layero) {
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        iframeWin.app.save();
                    }
                });
            }
            app.del = function (action, id) {
                let arrTitle = ['您确定要删除当前选中字典分类吗？', '您确定要删除当前选中字典项吗？'];
                let arrUrl = ['/api/sysDictType/delete', '/api/sysDictData/delete'];
                //
                var index = layer.confirm(arrTitle[action], function () {
                    http.post(arrUrl[action], { id }).then((res) => {
                        if (res.code == 200) {
                            layer.close(index);
                            toast.success({ message: '删除成功！' });
                            //
                            if (action == 0)
                                table.reload('lsttable');
                            else if (action == 1)
                                table.reload('lsttable_1');
                        }
                        else {
                            layer.alert('删除失败，错误信息' + res.message, { icon: 2 });
                        }
                    })
                });
            }
            //
            app.init = function () {
                //
                form.on('submit(btnsearch)', function (data) {
                    console.log(data.field)
                    table.reload('lsttable', {
                        where: data.field
                    })
                    return false;
                });
                //加载类型
                app.loadType();
            }();
        })
    </script>
}
